<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css"/>
		<!-- 引入第第三方的样式之外还可以自己定义样式  覆盖 -->
		
		<style>
			/* 限制网页宽度 */
			.container{
				width: 300px;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
		<div class="form-group">	
			<h3>用户的登录</h3>
			<!-- 展示区域,登录成功信息 先隐藏 -->
			<div id="msg" style="display: none;background-color:#11EE66;margin: 1px;"> 登录成功</div>
			
			
			<label>用户名:</label>
			<input type="text" class="form-control"
			autocomplete="off"
			placeholder="请输入用户名..."
			 name="username" id="username" />
		</div>
		<div class="form-group">
			<label>密码:</label>
			<input type="password" class="form-control" 
			 autocomplete="off"
			 placeholder="请输入密码..."
			 name="password" id="pasword" />
		</div>
		<div>
			<button id="btnSubmit" onclick="doSunbmit()" class="btn btn-success">登录</button>
			<button id="btnClear"  onclick="doClear()" class="btn btn-danger">清空</button>
			
		</div>
	</body>
	<script>
		function doSunbmit(){
			
		var username=document.getElementById("username")
			 console.log(username);     //对象
			 console.log(username.value);  //属性
			 
			 
		
		var Password=document.getElementById("pasword")    
					 console.log(Password.value);	 
			 
		/* 获取到msg框 */
		var msg=document.getElementById("msg")
		/*  */	
		msg.innerText= username.value+"登录成功";
		
		
		//改变msg样式,设置style属性
		
		msg.style="display:blok;color:white;background-color:#11EE66;margin: 1px;padding:10px";
		}
		
		function doClear(){
			document.getElementById("username").value=''; //清空值  ,单引号字符串
			document.getElementById("pasword").value="";  //清空值  ,双引号字符串
		}
		
	</script>
</html>
